<!--
 * @Author: your name
 * @Date: 2021-08-16 08:33:47
 * @LastEditTime: 2022-02-21 11:32:27
 * @LastEditors: jgg
 * @Description: In User Settings Edit
 * @FilePath: \yyzxwebd:\hsx\水文局设备运行巡检管理平台\web\src\views\equipmentManage\safeGuardList\add.vue
-->
<template>
    <el-dialog 
        :title="type=='add'?'新增用户':'编辑用户'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="800px"
        :before-close="onCancel"
    >
        <!-- fullscreen -->
        <el-form class="form form_height noScrollbar" ref="form"  :rules="rules" :model="form"  label-width="100px" label-position="right">
                <el-form-item label="头像:" prop="imgUrl">
                    <el-upload
                        ref="uploader"
                        :headers="headers"
                        :data="fdqDate"
                        class="avatar-uploader"
                        accept=".jpg,.jpeg,.png"
                        :action="'/upload/bmfile/uploadIcon'"
                        :file-list="fileList"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        >
                        <img v-if="form.avatar" :src="Url+form.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="账号:" prop="account" >
                            <el-input v-model="form.account"  clearable placeholder="请输入账号" :disabled="type=='add'?false:true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="姓名:" prop="name" >
                            <el-input v-model="form.name"  clearable placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12">
                        <el-form-item label="手机号:" prop="phone">
                            <el-input v-model="form.phone" clearable placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item label="职位:" prop="position">  -->
                    <!-- <el-select class="width100" v-model="form.position" placeholder="请选择职称">
                        <el-option v-for="(item, index) in titleList" :key="index" :label="item.value" :value="item.value"></el-option>
                    </el-select> -->
                    <!-- <el-input v-model="form.position"  clearable placeholder="请输入职位"></el-input>
                </el-form-item> -->
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="部门:" prop="deptId">
                            <el-select class="width100" v-model="form.deptId" placeholder="请选择部门">
                                <el-option v-for="(item, index) in comboList" :key="index" :label="item.simpleName" :value="item.deptId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色:" prop="roleId">
                            <el-select class="width100" v-model="form.roleId"  placeholder="请选择角色">
                                <el-option
                                    v-for="item in roleList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="市:" prop="cityId" >
                            <el-select class="width100" v-model="form.cityId" placeholder="请选择市" @change="cityChange()">
                                <el-option
                                    v-for="(item, index) in typeList0"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="区/县:" prop="districtId" >
                        <el-select class="width100" v-model="form.districtId" placeholder="请选择区/县" @change="areaChange()">
                            <el-option
                                v-for="(item, index) in typeList1"
                                :key="index"
                                :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                
                </el-row>
                <el-row :gutter="24">
                    <!-- <el-col :span="12">
                        <el-form-item label="镇/街道:" prop="streetId" >
                            <el-select class="width100" v-model="form.streetId" placeholder="请选择镇/街道">
                                <el-option
                                    v-for="(item, index) in typeList2"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-radio-group v-model="form.status">
                            <el-radio label="0">正常</el-radio>
                            <el-radio label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onSubmit" :loading="loading">保 存</el-button>
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { formatTimestamp } from '@/utils/common'
import userApi from '@/api/user'
import commonApi from '@/api/index'

import { Url } from '@/api/url.js'
export default {
    emits: ['onChange'],
    components:{
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        type:{
            default:'add',
            type: String
        },
        item:{
            default:()=>{
                return {}
            },
            type: Object
        }
    },
    data(){
        var validatorPhone = function (rule, value, callback) {
            if (value === '') {
                callback(new Error('手机号不能为空'))
            } else if (!/^1\d{10}$/.test(value)) {
                callback(new Error('手机号格式错误'))
            } else {
                callback()
            }
        };
        return {
            loading:false,
            form:{
                status:'0'
                // maintenancePersonId:[1,2,3]
            },
            rules:{
                account: [
                    { required: true, message: '请输入账号', trigger: ['change','blur'], }
                ],
                name: [
                    { required: true, message: '请输入名称', trigger: ['change','blur'], }
                ],
                phone: [
                    { required: true, validator: validatorPhone, trigger: ['change','blur'], }
                ],
                position: [
                    { required: true, message: '请输入职称', trigger: ['blur'], }
                ],
                deptId: [
                    { required: true, message: '请选择部门', trigger: ['change','blur'], }
                ],
                roleId: [
                    { required: true, message: '请选择角色', trigger: ['change','blur'], }
                ]
            },
            // 下拉数据
            comboList:[],
            roleList:[],
            titleList:[],
            typeList0:[],
            typeList1:[],
            typeList2:[],
            Url,
            fdqDate:{},
            fileList: [],
            headers:{
                'Authorization': localStorage.getItem('token')
            },
        }
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })
                this.getCity()
                this.getlistCombobox()
                this.getlistRolebox()
                if(this.type == 'edit'){
                    this.form = JSON.parse(JSON.stringify(this.item))
                }
            }else{
                this.$refs['form'].resetFields()
                this.form = {}
                this.form.status = '0'
                this.comboList = []
                this.roleList = []
                this.titleList = []
            }
        }
    },
    created(){
    },
    mounted(){
        this.fdqDate.type = this.$route.meta.title.replace("新增","")
        this.getCity()
    },
    methods:{
        // 获取下拉数据
        getlistCombobox(){//部门
            userApi.getlistCombobox().then((res)=>{
                if(res.data.length === 0) {
                    return
                }
                this.comboList = res.data || []
            }).catch((err)=>{
                this.$message.error(err.message)
            })
        },
        getlistRolebox(){//角色
            userApi.getlistRolebox().then((res)=>{
                this.roleList = res.data
            }).catch((err)=>{
                this.$message.error(err.message)
            })
        },
        getCity(){
            commonApi.queryAeraList({parentCode:'43'})
            .then(res => {
                this.typeList0 = res.data
                if (this.form.cityId) {
                    
                    this.getArea();
                }
            })
        },
        getArea(){
            commonApi.queryAeraList({parentCode:this.form.cityId})
            .then(res => {
                this.typeList1 = res.data
            })
        },
        getStreet(){
          
            commonApi.queryAeraList({parentCode:this.form.districtId})
            .then(res => {
                this.typeList2 = res.data
            })
        },
        cityChange(){
          this.form.districtId='';
          this.form.streetId='';
          this.getArea();
        },
        areaChange(){
          this.form.streetId='';
          this.getStreet();
        },
        // getByType(){//巡检类型
        //     userApi.getByType({
        //         dictType:'ZWXX'
        //     }).then((res)=>{
        //         this.titleList = res.data
        //     }).catch((err)=>{
        //         this.$message.error(err.message)
        //     })
        // },
        onSubmit(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                        this.loading = true
                        
                        if(this.type == 'add'){
                            this.form.areaCode='43';
                            userApi.userSave(this.form).then((res)=>{
                                this.loading = false
                                this.$emit('onChange',{bool:false,refresh:true})
                            }).catch((err)=>{
                                this.loading = false
                                this.$message.error(err.message)
                            })
                        }else if (this.type == 'edit'){
                            userApi.userUpdate(this.form).then((res)=>{
                                this.loading = false
                                this.$emit('onChange',{bool:false,refresh:true})
                            }).catch((err)=>{
                                this.loading = false
                                this.$message.error(err.message)
                            })
                        }
                        
                } else {
                    return false
                }
            })
        },
        onCancel(){
            this.$emit('onChange',{bool:false})
        },
        handleAvatarSuccess(res) {
            // this.form.picture = res.data.fileUrl
            if(res.code == 200) {
                
                this.form.avatar = res.data
            }else {
                this.$message.error(res.message||'上传失败')
            }
        },
        beforeAvatarUpload(file) {
            if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg') {
                this.$message.warning('请上传图片格式')
                return false
            }
        },
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 50vh;
        overflow-y: auto;
    }
    .width100{
        width: 100%;
    }
    ::v-deep.upload_box .el-upload-list__item-preview{
        display: none !important;
    }
    .img_box{
        display: flex;
        flex-wrap: wrap;
        &>div{
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            margin-right: 10px;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover{
                .delete_icon{
                    background-color: rgba(0,0,0,0.7);
                    display: flex;
                }
            }
            .delete_icon{
                display: none;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                color: #fff;
                font-size: 20px;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                
            }
        }
        
    }
    ::v-deep .avatar-uploader .el-upload {
        width: 100px;
        height: 100px;
        line-height: 100px;
        .avatar-uploader-icon {
            font-size: 40px;
        }
    }
    .avatar {
        width: 100%;
        height: 100%;
    }
</style>

